<template>
  <div class="app">
    <mt-header
      title="修改密码"
      style="background-color: rgb(122, 188, 103); box-shadow: 1px 3px 10px #bbb"
    >
      <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      <router-link slot="right" to="/login">登录</router-link>
    </mt-header>
    <div id="middle" v-if="reveal">
      <div>找回密码</div>
      <div>
        请输入账号
        <input
          @blur="examine"
          type="text"
          placeholder="手机号"
          v-model="phone"
        />
        <div class="getauths" v-show="authhint">
          <input
            type="text"
            @blur="checkAuth"
            placeholder="请输入短信验证码"
            v-model="auths"
          />
          <button id="btn2" :disabled="AuthBoolean" @click="count">
            {{ authCode2 }}
          </button>
        </div>
        <div v-show="reminder">
          <i class="el-icon-warning"></i>
          <span>{{ hint }}</span>
        </div>
      </div>
      <button id="btn" :disabled="have" @click="nextStep">下一步</button>
    </div>
    <div id="middle" v-if="reveal1">
      <div>输入要修改的密码</div>
      <div>
        请输入密码
        <input
          type="password"
          placeholder="密码"
          v-model="upwd"
          @blur="checkPwd"
        />
        <div style="color: red" v-show="authhint">
          <i class="el-icon-warning"></i>
          <span>{{ hint2 }}</span>
        </div>
        <div class="getauths">
          <input
            type="password"
            @blur="checkPwd2"
            v-model="upwd2"
            style="width: 100%"
            placeholder="确认密码"
          />
        </div>
        <div v-show="authhint1">
          <i class="el-icon-warning"></i>
          <span>{{ hint3 }}</span>
        </div>
      </div>
      <button id="btn" @click="submit">下一步</button>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  watch: {
    authCode(newvalue, oldvalue) {
      this.authCode2 = `重新发送${this.authCode}S`;
      if (newvalue == 0) {
        this.authCode = "发送验证码";
        this.AuthBoolean = false;
        btn2.style = "color: #2b8dfd ;";
      }
    },
  },
  data() {
    return {
      phone: "",
      popup: "",
      hint: "",
      hint2: "",
      hint3: "",
      auths: "",
      upwd: "",
      upwd2: "",
      reveal: true,
      reveal1: false,
      authCode: "",
      authCode2: "发送验证码",
      have: true,
      reminder: false,
      authhint: false,
      authhint1: false,
      AuthBoolean: false,
    };
  },
  methods: {
    // 修改密码区域
    submit() {
      let url = `users/updateupwd`;
      let params = `phone=${this.phone}&upwd=${this.$md5(this.upwd)}`;
      if (this.checkPwd2() && this.checkPwd()) {
        this.axios.post(url, params).then(res => {
          if (res.data.code == 200) {
            Toast({
              message: res.data.msg,
              iconClass: "icon icon-success",
            });
            this.$router.push("/login");
          } else {
            Toast({
              message: res.data.msg,
              iconClass: "icon icon-success",
            });
          }
        });
      } else {
        return;
      }
    },

    checkPwd2() {
      // 用于验证确认密码输入框的值是否符合要求
      if (this.upwd2 && this.upwd == this.upwd2) {
        this.authhint1 = false;
        this.have = false;
        return true;
      } else if (this.upwd != this.upw2) {
        this.hint3 = "密码不一致";
        this.authhint1 = true;
        return false;
      } else {
        this.hint3 = "密码为6~16数字或字母";
        this.authhint1 = true;
        return false;
      }
    },

    checkPwd() {
      // 用于验证密码输入框的值是否符合要求
      let exp = /^[a-zA-Z0-9_-]{6,16}$/;
      if (this.upwd && exp.test(this.upwd)){
        this.authhint = false;
        return true;
      } else {
        this.hint2 = "密码为6~16数字或字母";
        this.authhint = true;
        return false;
      }
    },

    // 验证是否可以修改区域
    // 点击下一步
    nextStep() {
      let url = `users/login`;
      let params = `phone=${this.phone}&auth=${this.auths}`;
      this.axios.post(url, params).then(res => {
        if (res.data.code == 200) {
          this.reveal = false;
          this.reveal1 = true;
          this.authhint = false;
        } else {
          this.reminder = true;
          this.hint = res.data.msg;
        }
      });
    },

    checkAuth() {
      // 用于验证确认验证码输入框的值是否符合要求
      let exp = /^[0-9]\d{5,7}$/;
      if (this.auths && exp.test(this.auths)) {
        this.have = false;
        this.reminder = false;
        return true;
      } else {
        this.hint = "非法验证码!";
        this.reminder = true;
        return false;
      }
    },

    count() {
      //短信验证码按钮
      btn2.style = "color:#aaa ;";
      this.AuthBoolean = true;
      this.authCode = 60;
      if (this.authCode > 0) {
        var timer = setInterval(() => {
          this.authCode--;
          if (this.authCode == 0) {
            clearInterval(timer);
          }
        }, 1000);
      }
    },

    // 发送手机号码是否存在请求
    // 异步axios请求返回值直接返回为undefined所以声明从方法为异步方法并等待异步操作执行完毕
    examine() {
      let pipei = /^1[3-9]\d{9}$/;
      if (this.phone  && pipei.test(this.phone)) {
        let url = `users/getpassindex?phone=${this.phone}`;
        this.axios.get(url).then(res => {
          if (res.data.code == 200) {
            this.reminder = false;
            this.authhint = true;
          } else {
            this.reminder = true;
            this.hint = res.data.msg;
            return false;
          }
        });
      } else {
        this.reminder = true;
        this.hint = "手机号错误";
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  background-color: rgb(230, 250, 251);
  height: 100vh;
  > #middle {
    background-color: white;
    width: 300px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 8px;
    > div:first-child {
      margin: 20px;
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      padding: 0 10px;
      border-left: 2px solid #36c14c;
    }
    > div:nth-child(2) {
      padding: 10px 30px;
      font-size: 12px;
      font-family: PingFangSC-Semibold;
      display: flex;
      flex-direction: column;
      input {
        margin: 10px 0;
        padding: 10px 5px;
        border-radius: 6px;
        border: none;
        background-color: rgb(246, 245, 250);
      }
      > .getauths {
        display: flex;
        justify-content: space-between;
        > button {
          width: 40%;
          background-color: white;
          color: #38f5ac;
        }
      }
      > div:last-child {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: red;
        margin: 8px 0 2px;
        > span {
          padding-left: 4px;
          font-size: 10px;
          font-family: "";
        }
      }
    }
    #btn {
      width: 240px;
      margin: 20px 30px;
      padding: 10px;
      border-radius: 10px;
      background-image: linear-gradient(
        124.85deg,
        #3ed2cb -20.29%,
        #82f172 107.31%
      );
    }
  }
}
</style>
<style>
* {
  margin: 0;
  border: none;
}
a {
  text-decoration: none;
}
</style>
